<template>
    <div class="type">
        <div class="search">
            <van-image
                @click="gotoChat"
                class="img"
                width="22"
                height="20"
                src=""
            />
            <van-search
                class="sear"
                v-model="value"
                shape="square"
                placeholder="学院风jk套装"
                />
            <van-image
                @click="gotocart"
                class="imgt"
                width="25"
                height="20"
                src=""
            />
        </div>
        <div class="list" >
            <div class="left" ref="left" 
            @touchstart="LeftSlither($event)"
            @touchmove.prevent="move($event)" 
            @touchend="end"
            :style="{transform:`translateY(-${Left}px)`}">
                <div class="list-left" ref="left">
                    <div class="item" v-for="(t,i) in ListLeft" :key="t.miniWallkey" :class="{con:i==index}" @click="ChangeType(i,t.maitKey)">
                        <div class="lest" :class="{con:i == index}"></div>
                        {{ t.title }}
                    </div>
                </div>
            </div>
            <div class="right" ref="right">
                <div class="list-right" ref="right">
                    <div class="top">
                        <div class="top-item" v-for="d in ListRightTop" :key="d.amc" @click="gotoresult(d.title)">
                            <div class="top-item-img">
                                <van-image class="top-item-img-img" width="65" height="65" :src="d.image" />
                            </div>
                            <p class="top-item-text">{{ d.title }}</p>
                        </div>
                    </div>
                    <div class="cent">
                        <div class="classify" :class="{item: RightButtonType == 0}"
                            @click = 'RightButType(0)'
                        >综合</div>
                        <div class="classify" :class="{item: RightButtonType == 1}"
                            @click = 'RightButType(1)'
                        >销量</div>
                        <div class="classify" :class="{item: RightButtonType == 2}"
                            @click = 'RightButType(2)'
                        >新品</div>
                    </div>
                    <div class="but">
                        <div class="but-item" v-for="c in ListRightBut" :key="c.iid" @click="gotodetailed(c.iid)">
                            <div class="but-item-img">
                                <van-image class="but-item-img-img" width="124" height="179" :src="c.img" />
                            </div>
                            <p class="but-item-text">{{ c.title }}</p>
                            <div class="but-item-price">
                                <div class="but-item-price-left">¥{{ c.price }}</div>
                                <div class="but-item-price-right">{{ c.orgPrice }}
                                    <van-image class="right-img" width="12" height="12" src="" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {TypeAPI , TypeDetailedRightTopAPT ,TypeDetailedRightButtonAPT} from '../../api/home'
export default{
    data(){
        return{
            value:'',
            ListLeft:[],
            // 选择的是左列的默认第一个
            index:0,
            // 开始时右侧axios请求的默认是左列第一个
            num: "3627",
            // 右列上数据
            ListRightTop:[],
            // 右列下类型
            RightButtonType:0,// new新品 sell销量 pop综合
            // 右列下数据
            ListRightBut:[],
            //左列滚动的距离
            Left:0,
            //右列滚动的距离
            Right:0,
            // 事件
            flags:false,
            // 点击时的y位置
            leftY:0,
            // 存最后停留的位置
            endLeft:0,
        }
    },
    methods:{
        // 左滑动
        LeftSlither(e){
            this.flags = true;
            var touch;
            if(e.touches){
                touch = e.touches[0]
            }else{
                touch = e
            }
            this.leftY = touch.clientY
        },
        move(e){
            if(this.flags){
                var touch;
                if(e.touches){
                        touch = e.touches[0];
                    }else {
                        touch = e;
                  }
                // console.log("点击",this.leftY);
                // console.log('移动',touch.clientY);
                let Left = (touch.clientY - this.leftY + 50);
        
                document.addEventListener("touchmove",function(){
                    // event.preventDefault();
                    e.stopPropagation()
				},false);
                this.Left = Left
            }
        },
        end(){
            let le = this.Left;
            if(le >=50){
                this.Left = -50;
            }
            this.flags = false;
        },
        // 左侧列表
        async typelist(){
            let url = TypeAPI;
            let {data} = await this.$axios(url);
            this.ListLeft = data.data['117330'].list;
        },
        ChangeType(index,maitKey){
            this.index = index;
            if(this.num == maitKey){
                return
            }
            this.num = maitKey
            this.RightButtonType = 0;
            this.TypeDetailed();
            this.TypeDetailedBut();
        },
        // 右侧上
        async TypeDetailed(){
            let url = TypeDetailedRightTopAPT(this.num);
            let {data} = await this.$axios(url);
            this.ListRightTop = data.data.list;
        },
        // 右侧下
        async TypeDetailedBut(){
            let type = 'pop'
            if(this.RightButtonType == 0){
                type = 'pop'
            }else if(this.RightButtonType == 1){
                type = 'sell'
            }else if(this.RightButtonType == 2){
                type = 'new新品'
            }

            let url = TypeDetailedRightButtonAPT(this.num,type);
            let {data} = await this.$axios(url);
            this.ListRightBut = data.result.wall.docs
        },
        // 右侧下类型改变
        RightButType(id){
            if(this.RightButtonType == id){
                return
            }
            this.RightButtonType = id 
            this.TypeDetailedBut();
        },
        // 跳转到搜索结果页
        gotoresult(value){
            this.$router.push({
                name:'SearchResult',
                query:{
                    text:value,
                }
            })
        },
        // 跳转到商品详情页
        gotodetailed(id){
            this.$router.push({name: "goods-detail", params: {id: id}});    
        },
        // 跳转到聊天
        gotoChat(){
            this.$router.push('/ChatPage')
        },
        // 跳转到购物车
        gotocart(){
            this.$router.push('shoppingCar')
        },
    },
    mounted(){
        this.typelist();
        this.TypeDetailed();
        this.TypeDetailedBut();
    },
    computed:{
        LeftWidth(){
            return this.ListLeft.length * 110 + 'px'
        }
    }
}
</script>

<style lang="scss" scoped>
.type{
    position: relative;
    .search{
        width: 100%;
        z-index: 10;
        position: fixed;
        padding: 7.5px 5px;
        height: 30px;
        background-color: #fff;
        border-bottom: 1px solid #e5e5e5;
        display: flex;
        align-items: center;
        .sear{
            flex: 1;
            padding: 5px ;
            height: 30px;

            .van-search__content{
                background-color: #eeeeee;
            }
        }
        input:-moz-placeholder,  
        textarea:-moz-placeholder {  
            color: #9e9e9e;  
        }  
        input:-ms-input-placeholder,  
        textarea:-ms-input-placeholder {  
            color: #9e9e9e;  
        }  
        input::-webkit-input-placeholder,  
        textarea::-webkit-input-placeholder {  
            color: #9e9e9e;  
        }
        .img{
            margin: 0px 5px 0px 15px;
        }
        .imgt{
            margin: 0px 15px 0px 2px;
        }
    }
    .list{
        padding: 45px 0px 0px;
        display: flex;
        box-sizing: border-box;
        // height: 100vh;
        // overflow: hidden;
    
        .left{
            overflow: hidden;
            width: 110px;
            .list-left{
                width: 110px;
                background-color: #f6f6f6;
                height: 100%;
                .item{
                    height: 45px;
                    line-height: 45px;
                    text-align: center;
                    font-size: 14px;
                    color: #666;
                    position: relative;
                    background-color: #f6f6f6;
                    &.con{
                        font-weight: bold;
                        color: #ff5777;
                        background-color: #fff;
                    }
                    .lest{
                        position: absolute;
                        top: 15px;
                        left: 0px;
                        height: 13px;
                        width: 4px;
                        background-color: #ff5777;
                        display: none;
                        &.con{
                            display: block;
                        }
                    }
                }
            }
        }

        .right{
            width: calc(100% - 110px);
            overflow: hidden;
            .list-right{
                background-color: #fff;
                height: 100%;
                .top{
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    justify-content: flex-start;
                    padding: 15px 10px 17px;
                    .top-item{
                        width: 33.33%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        .top-item-img{
                            width: 65px;
                            height: 65px;
                            .top-item-img-img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .top-item-text{
                            font-size: 12px;
                            color: #666;
                            margin: 10px 0px 10px;
                        }
                    }
                }
                .cent{
                    display: flex;
                    height: 39px;
                    width: 100%;
                    border-bottom: 1px solid #eaeaea;
                    align-items: center;
                    .classify{
                        width: 33%;
                        height: 15px;
                        box-sizing: border-box;
                        border-left: 1px solid #e6e6e6;
                        font-size: 14px;
                        color: #333;
                        text-align: center;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        &.item{
                        color: #ff5777;
                        }
                    }

                }
                .but{
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    padding: 0px 5.7px 0px;
                    .but-item{
                        margin: 5.7px 0px 0px;
                        width: calc((100% - 5.7px) / 2);
                        height: 227px;
                        
                        .but-item-img{
                            width: 100%;
                            height: 179px;
                            .but-item-img-img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .but-item-text{
                            padding: 5px 6px 0px;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            font-size: 12px;
                            color: #333;
                            margin: 0px;
                        }
                        .but-item-price{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            padding: 0px 6px 0px;
                            .but-item-price-left{
                                font-size: 15px;
                                color: #ff5777;
                                margin-top: 3px;
                                font-weight: 700;
                            }
                            .but-item-price-right{
                                font-size: 12px;
                                color: #999;
                                margin-top: 4.5px;
                                display: flex;
                                align-items: center;
                                .right-img{
                                    margin-left: 3px;
                                }
                            }
                        }
                    }
                }
            }
        }


    }
}
</style>